<template>
  <Component
    v-show="mappingProps.visible"
    ref="refComponent"
    class="t-chip"
    v-bind="{ ...attrs, ...mappingProps }"
    @click="handleClick"
    @remove="handleRemove"
    :style="{'--check-size': mappingProps.checkSize}"
  >
    <slot></slot>
  </Component>
</template>

<script setup>
  import Component from '@teld/q-components/Chip';
  import useMappingProps from 't/common/hooks/useMappingProps';
  import { commonProps } from 't/common/utils';
  import { ref, useAttrs, useSlots } from 'vue';
  import { useQuasar } from '@teld/q-components';
  const $q = useQuasar();
  const refComponent = ref();
  const slots = useSlots();
  const attrs = useAttrs();
  const props = defineProps({
    ...commonProps,
    ...Component.props,
    color: {
      type: String,
      default() {
        return ''; // 元数据设置的默认颜色 #1976D2
      },
    },
    checkSize: {
      type: String,
      default() {
        return '15px';
      }
    },
    iconRemove: {
      type: String,
      default() {
        return 'close' // demo中没有, 但是源码中有, 直接改这里用了
      }
    },
  });
  const [mappingProps, mappingExpose] = useMappingProps(props);
  defineExpose(mappingExpose);

  // == 事件 ==
  const emit = defineEmits(['click', 'remove']);

  // 点击事件
  const handleClick = params => {
    emit('click', params);
  };
  const handleRemove = state => {
    emit('remove', state);
  };
</script>

<style lang="scss">
.t-chip.q-chip--clickable:focus {
  body.desktop & {
    box-shadow: none; // 去除focus时 quasar 的默认效果
  }
  box-shadow: none; // 去除focus时 quasar 的默认效果
}
// 起源: 春辉需要用到 叉号 图标
.t-chip {
  $iconGap: 6px;
  .q-icon {
    color: inherit;
  }
  .q-chip__icon--right {
    margin-left: $iconGap;
  }
  .q-chip__icon--left {
    margin-right: $iconGap;
  }
  .q-chip__icon--remove {
    transform: translateX(-1px); // 修正视觉偏差
    margin-left: $iconGap;
    font-size: 1em; // 14px;
  }
  .q-chip__content {
    font-size: 14px; // 默认也是14px
  }
  &.q-chip {
    border-radius: 100px; // quasar 默认是根据 height 设置的，够用就好 -- 这里我们改变高度了，所以要增大
  }
  &.q-chip--square {
    border-radius: 2px; // 默认是 4px
  }
  &.q-chip {
    $heightItem: 24px;
    line-height: $heightItem;
    background-color: rgba(var(--t-color-rgb), 0.1); // 0, 120, 212
    padding: 0 8px;
    // 原来是 margin-left，margin-right 都是 4px
    margin-left: 0;
    margin-right: 8px;
    color: rgba(var(--t-color-rgb), 1); // 0, 120, 212

    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }
  // 起源: 辰哥组件用到 selected 样式
  &.q-chip--selected {
    padding-right: 25px;
    .q-chip__icon--left {
      box-sizing: border-box;
      position: absolute;
      bottom: 2px;
      right: 0;
      // width: v-bind(checkSize);
      // height: v-bind(checkSize);
      width: var(--check-size);
      height: var(--check-size);
      padding-left: 5px;
      line-height: 20px;
      margin-right: 0;
      font-size: 6px; // 规范没明确, 测试是6px, 但是6视觉效果太小 故而 8px;

      color: rgba(255, 255, 255, 1) !important;
      background-image: linear-gradient(
        to bottom right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) calc(50% - 0px),
        rgba(var(--t-color-rgb), 1) 50%,
        rgba(var(--t-color-rgb), 1) calc(50% + 1.5px),
        rgba(var(--t-color-rgb), 1) 100%
      );
    }
  }
}
</style>
